<template>
  <el-dialog
    v-model="show"
    title="提货卡详情"
    width="980"
    align-center
    :close-on-click-modal="false"
    :show-close="false"
  >
    <div class="content">
      <div class="title-data">提货信息</div>
      <div class="line">
        <div>
          <div class="title">提货卡号</div>
          <div class="box">00000000013</div>
        </div>
        <div>
          <div class="title">绑定设备</div>
          <div class="box">新颜路1号</div>
        </div>
      </div>
      <div class="line">
        <div>
          <div class="title">提货时间</div>
          <div class="box">8：00————19：00</div>
        </div>
        <div>
          <div class="title">设备地址</div>
          <div class="box">常熟市青川街道新颜路1号</div>
        </div>
      </div>
      <div class="line">
        <div>
          <div class="title">开始时间</div>
          <div class="box">2024-04-28</div>
        </div>
        <div>
          <div class="title">截至时间</div>
          <div class="box">2024-05-28</div>
        </div>
      </div>
      <div class="line">
        <div class="title">绑定手机号</div>
        <div class="box">18574637557，16764738774</div>
      </div>
      <div class="title-data">商品信息</div>
      <div class="table">
        <el-table :data="tableData" height="300" style="width: 100%">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            v-for="(item, index) in headerArr"
            :key="index"
          >
            <template #default="scope">
              <img
                v-if="item.prop == 'img'"
                class="goods_img"
                :src="scope.row.img"
              />
              <div
                v-if="item.prop == 'status'"
                :class="{
                  type3: ['启用'].includes(scope.row.status),
                  type2: ['完结', '暂停'].includes(scope.row.status),
                }"
              >
                {{ scope.row.status }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 底部分页 -->
        <div class="page_number">
          <el-pagination
            v-model:current-page="pager.currentPage"
            v-model:page-size="pager.pageSize"
            :disabled="!pager.total"
            layout="prev, pager, next, jumper,total"
            :total="pager.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button round type="primary" @click="submit()" color="#0071bb"
          >确定</el-button
        >
        <el-button round @click="close()">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref, defineEmits } from "vue";
const emit = defineEmits(["close", "submit"]);
// 取消
const close = () => {
  emit("close");
};
const submit = () => {
  emit("submit");
};
const headerArr = ref<any>([
  { label: "序号", prop: "index", show: true },
  { label: "商品图片", prop: "img", show: true },
  { label: "商品名称", prop: "name", show: true },
  { label: "商品条码", prop: "code", show: true },
  { label: "配送状态", prop: "status", show: true },
  { label: "提货状态", prop: "name", show: true },
]);
const tableData = ref();
// 初始化表格数据
const initData = () => {
  tableData.value = [
    {
      index: "1",
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      name: "伯克材料3668649",
      code: "3668649",
      allNum: 100,
      status: "启用",
      dayNum: 5,
    },
    {
      index: "2",
      name: "伯克材料3668649",
      code: "——",
      allNum: 100,
      dayNum: 0,
      status: "暂停",
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
    {
      index: "3",
      name: "伯克材料3668649",
      code: "——",
      allNum: 100,
      dayNum: 5,
      status: "完结",
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
    {
      index: "4",
      name: "伯克材料3668649",
      code: "——",
      allNum: 100,
      status: "启用",
      dayNum: 0,
      img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
  ];
};
const show = ref<boolean>(true);
// 分页
const pager = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10,
});
// 改变pageSize
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
// 改变当前页码 currentPage
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.desc {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  align-items: center;
  color: #808080;
  margin: 10px 0;
}

.title-data {
  color: #4d4d4d;
  font-size: 16px;
  font-weight: 500;
  margin: 10px 0px;
}

.table {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page_number {
  align-self: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
}
.goods_img {
  width: 30px;
  height: 50px;
}
.left-box {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-left: 20px;
  .choice-btn {
    display: flex;
    justify-content: left;
  }
}
.search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.type2 {
  color: red;
}
.type3 {
  color: rgb(0, 113, 187);
}
.line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50%;
  }
  .title {
    border: 1px solid #e3e2e2;
    background: #00ffff !important;
    width: 180px;
    height: 40px;
    line-height: 40px;
    padding: 0px 10px;
    font-size: 12px;
  }
  .box {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 1px solid #e3e2e2;
    padding: 0px 10px;
    font-size: 12px;
    flex: 1;
  }
}
</style>
